<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>net/http Demo</title>
</head>
<body>
  <div class="header">
    <div class="nav nav-left">
      <a href="https://zhuanlan.zhihu.com/p/25303493">FLEX</a>
    </div>
    <div class="nav nav-center"></div>
    <div class="nav nav-right"><a href="javascript:;">注册/登录</a></div>
  </div>
  <div class="main">
    <div class="main-left"></div>
    <div class="main-center">
      <ul>
        <li>在黎明到来之前，必须有人稍微照亮黑暗</li>
        <li>最初的鸟儿是不会飞翔的，飞翔是它们勇敢跃入峡谷的奖励。</li>
        <li>我想要和你们一起旅行。去看看生命的小溪到海之前，会经历的夹岸繁花与天际云霞。</li>
        <li>你能够做到的，比想像的更多。</li>
        <li>只要你的渴望尚未平息，那抬头应该可以看到那无光的闪耀吧。</li>
        <li>世事易变，匪石弗转。</li>
      </ul>
    </div>
    <div class="main-right"></div>
  </div>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    .header {
      display: flex;
      /* 1. flex-direction 决定主轴（x轴）的子元素排列方向，默认row*/
      /* flex-direction:row;   */
      /* 2. flex-wrap: 决定容器内项目是否可换行，默认nowrap */
      /* flex-wrap: nowrap; */
      /* 3. justify-content：定义了项目在主轴的对齐方式。默认值: flex-start 左对齐 */
      justify-content:space-around; /*space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。*/
      width: 100%;
      height: 25px;
      background-color: #fff;
      padding-top: 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid #ccc;
    }
    .nav {
      height: 100%;
      min-width: 30px;
      background-color: #fff;
    }
    .nav-left,.nav-right {
      flex-grow:1;
    }
    .nav-left{ 
      padding-left: 3rem;
      text-align: left;
    }
    .nav-right {
      padding-right: 3rem;
      text-align: right;
    }
    .nav-center {
      flex-grow: 2;
    }
    .main {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: .5rem;
    }
    .main>.main-center {
      flex-grow:3
    }
    .main-left,.main-right {
      flex-grow:1
    }
    .main>.main-center>ul>li {
      padding: 1rem;
      border-bottom: 1px solid rgba(	220 ,220 ,220, .5);
    }
  </style>
</body>
</html>